<template>
    <el-dialog v-model="fromParam.modal" :title="fromParam.title" width="640" @close="CloseResetBind">
        <el-form ref="bindForm" :model="params" :rules="rules" label-width="100">
            <el-form-item label="角色" required prop="RoleId">
                <MySelect v-model="params.RoleId" :options="fromParam.RoleId" value="Value" label="Title"></MySelect>
            </el-form-item>
        </el-form>
        <div slot="footer" class="modal-footer">
            <el-button @click="CloseResetBind">取消</el-button>
            <el-button type="primary" @click="BindAllSubmit">提交</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { PermessionBind } from './Def';
import { FormInstance, FormRules } from 'element-plus';
import { RoleApiApi } from '@/api/permession/bind';
import MessageUti from "@/library/utils/MessageUti"
import { MySelect } from "@/components"

const props = defineProps<{
    fromParam: PermessionBind.BindingDialog,
    GetData: () => void
}>()


const bindParams = ref<PermessionBind.BindParams>({
    RoleId: undefined
})

const params = ref<PermessionBind.BindParams>({ ...bindParams.value })
const rules = ref<FormRules<PermessionBind.BindParams>>({
    RoleId: [{ required: true, message: '请选择角色', trigger: 'blur' }]
})
const bindForm = ref<FormInstance>()

const BindAllSubmit = () => {
    if (!bindForm.value) return

    bindForm.value.validate((valid) => {
        if (valid) {
            const Api = props.fromParam.option === 1 ? RoleApiApi.RoleBindAllApi : RoleApiApi.RoleUnBindAllApi
            let param = {
                ...params.value
            }

            Api({ ...param }).then((res) => {
                MessageUti.showSuccess('操作成功')
                CloseResetBind()
                props.GetData()
            })
        }
    })
}

const CloseResetBind = () => {
    props.fromParam.modal = false
    params.value = { ...bindParams.value }
    props.fromParam.title = ''
    props.fromParam.option = undefined
    bindForm.value?.resetFields()
}

</script>

<style scoped></style>